<style lang="scss" scoped>
</style>

<template>
  <el-dialog v-model="visible" :title="dialogTitle" :width="500" @close="handleClose">
    <div class="modal_content">
      <el-form :model="handleForm" ref="formRef" label-width="100" :rules="blankRules" :disabled="isDisabled">
        <el-form-item label="用户名：" prop="name">
          <el-input class="all_width" clearable v-model="handleForm.name"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="phone">
          <el-input class="all_width" clearable v-model="handleForm.phone" placeholder="请输入联系电话" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input class="all_width" clearable v-model="handleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item  label="展示金额：" prop="isShow">
          <el-switch v-model="handleForm.isShow" active-value="启用" inactive-value="禁用" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" @change="changeValue"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="modal-btn-list">
        <div></div>
        <div>
          <el-button @click="handleClose">取消</el-button>
          <el-button  :loading="loading" type="primary"  @click="submitForm(formRef)">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineEmits } from "vue";
import {postUserAddInternalUser,postUserUpdateInternalUser} from "@/api/internalUser.js"

const emit = defineEmits(["ok"]);

let handleForm = reactive({
  password: "",
  name: "",
  phone: "",
  isShow: "启用",
  id:"",
});
const blankRules = reactive({
  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  password:[{ required: true, message: "请输入密码", trigger: "blur" }],
  isShow: [{ required: true, message: "请选择使用状态", trigger: "change" }],
});

const formRef = ref();
const visible = ref(false);
const loading = ref(false);
const detailType = ref("");
// 控制是否禁用
const isDisabled = ref(false);

// 打开
let dialogTitle = ref("");

const changeValue = () => {
  console.log(handleForm.isShow);
}

const getParent = (type) => {
  detailType.value = type.userState;
  isDisabled.value = false;
  visible.value = true;
  const isShowBoolean = type.isShow === 1 ? "启用" : "禁用";
  // 根据操作是“添加”还是“编辑”设置对话框标题
  if (detailType.value === "edit") {
    console.log(type)
    dialogTitle.value = "编辑内部用户";
    handleForm.name = type.name;
    handleForm.phone = type.phone;
    handleForm.password = type.password;
    handleForm.isShow = isShowBoolean;
    handleForm.id = type.id;
  }else {
    console.log(type)
    dialogTitle.value = "添加内部用户";
    handleForm.name = "";
    handleForm.phone = "";
    handleForm.password = "";
    // handleForm.id = "";
    console.log(handleForm)
  }
};

// 关闭
const handleClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

const submitForm = async (form) => {
  try {
    await form.validate();
    handleForm.isShow = handleForm.isShow === "启用" ? 1 : 0;
    if(!handleForm.id){
      await postUserAddInternalUser(handleForm);
      handleClose();
    }else {
      await postUserUpdateInternalUser(handleForm);
      handleClose();
    }
    emit("ok");
    console.log('表单验证通过，接口调用成功');
  } catch (error) {
    console.error('表单验证失败或接口调用失败', error);
  }
};

defineExpose({
  getParent,
});
</script>
